<template>
  <div class="custom_goods_list_item">
    <div class="custom_goods_list_item_content">
      <div
        class="custom_goods_list_item_content_item"
        v-if="type === 'horizontal'"
      >
        <router-link :to="item.url">
          <img :src="item.image" v-lazy="item.image" />
          <div class="custom_goods_list_item_content_item_info">
            <h1>
              {{ item.title }}<span>{{ item.desc }}</span>
            </h1>
            <p>
              <i>{{ item.unit }}{{ item.pastPrice }}</i> {{ item.unit
              }}<span>{{ item.currentPrice }}</span>
            </p>
          </div>
        </router-link>
      </div>
      <div
        class="custom_goods_list_item_content_item vertical"
        v-if="type === 'vertical'"
        :style="{
          marginLeft:
            type === 'vertical' && index % 2 === 0 ? 7 / 23.44 + 'rem' : '',
        }"
      >
        <router-link :to="item.url">
          <img :src="item.image" v-lazy="item.image" />
          <div class="custom_goods_list_item_content_item_info">
            <h1>
              {{ item.title }}<span>{{ item.desc }}</span>
            </h1>
            <p>
              <i>{{ item.unit }}{{ item.pastPrice }}</i> {{ item.unit
              }}<span>{{ item.currentPrice }}</span>
            </p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "goodsListItem",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    type: {
      type: String,
      default() {
        return "horizontal";
      },
    },
    index: {
      type: Number,
      default() {
        return 0;
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_goods_list_item {
  .custom_goods_list_item_content {
    .custom_goods_list_item_content_item {
      &.vertical {
        float: left;
        width: (177.5 / @base);
        text-align: left;
        margin: (5 / @base) (2.5 / @base);
        a {
          display: block;
          img {
            width: 100%;
          }
        }
      }
      margin: (5 / @base) (5 / @base);
      text-align: left;
      a {
        display: flex;
        width: 100%;
        img {
          width: (146 / @base);
          height: (120 / @base);
        }
        .custom_goods_list_item_content_item_info {
          flex: 1;
          h1 {
            font-size: (14 / @base);
            font-weight: 400;
            padding: (5 / @base) (10 / @base);
            span {
              font-size: (12 / @base);
              color: #ccc;
              display: block;
              height: (48 / @base);
              overflow: hidden;
              white-space: normal;
              text-overflow: ellipsis;
            }
          }
          p {
            color: #ce1212;
            font-size: (12 / @base);
            padding: 0 (10 / @base);
            i {
              font-style: normal;
              font-size: (12 / @base);
              color: #ccc;
              text-decoration: line-through;
              margin: 0 0 (5 / @base) 0;
              display: block;
            }
            span {
              font-size: (16 / @base);
            }
          }
        }
      }
    }
  }
}
</style>
